<template>
  <div class="station-card">
    <!-- 自定义标题栏 -->
    <div class="card-header">
      <div class="card-title">纸板利用率统计</div>
    </div>
    
    <!-- 表格数据区域 - 占满剩余空间 -->
    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>纸板类型(宽度)</th>
            <th>用纸面积(m²)</th>
            <th>出纸面积(m²)</th>
            <th>利用率(%)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in processedTableData" :key="index" :class="{ 'total-row': item.isTotal }">
            <td>{{ item.type }}</td>
            <td>{{ item.paperArea }}</td>
            <td>{{ item.outputArea }}</td>
            <td :class="getUtilizationClass(item.utilization)">{{ item.utilization }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { defineProps } from 'vue';

// 定义接收的外部数据属性
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
    required: true
  }
});

const mm2ToM2 = (mm2, decimal = 2) => {
  // 1. 校验输入：过滤非数字/空值
  const num = Number(mm2);
  if (isNaN(num) || mm2 === '' || mm2 === null || mm2 === undefined) {
    console.warn('请输入有效的平方毫米数值');
    return ''; // 输入无效时返回空，避免页面显示 NaN
  }

  // 2. 核心换算：平方毫米 ÷ 10⁶
  const m2 = num / 1000000;

  // 3. 处理小数：保留指定位数（避免科学计数法，如 0.000001 正常显示为 0.00）
  return Number(m2.toFixed(decimal));
};

// 处理表格数据，添加汇总行
const processedTableData = computed(() => {
  // 处理原始数据
  const formattedData = props.data.map(item => ({
    type: `${item.typeWidth}mm型`,
    paperArea:  mm2ToM2(item.usageArea),
    outputArea: mm2ToM2(item.outputArea),
    utilization: (item.utilizationRate * 100).toFixed(2) + '%',
    isTotal: false
  }));
  
  // 计算汇总数据
  const total = props.data.reduce(
    (acc, item) => {
      acc.usageArea += mm2ToM2(item.usageArea);
      acc.outputArea += mm2ToM2(item.outputArea);
      return acc;
    },
    { usageArea: 0, outputArea: 0 }
  );
  
  // 计算汇总利用率，处理除数为0的情况
  let totalUtilization = 0;
  if (total.outputArea > 0) {
    totalUtilization = (total.usageArea / total.outputArea) * 100;
  }
  
  // 添加汇总行
  formattedData.push({
    type: '总计',
    paperArea: total.usageArea.toFixed(2),
    outputArea: total.outputArea.toFixed(2),
    utilization: totalUtilization.toFixed(2) + '%',
    isTotal: true
  });
  
  return formattedData;
});

// 根据利用率设置样式
const getUtilizationClass = (utilization) => {
  // 提取数字部分并转换为浮点数
  const value = parseFloat(utilization);
  if (value >= 90) return 'high-utilization';
  if (value >= 80) return 'medium-utilization';
  return 'low-utilization';
};
</script>

<style scoped>
.station-card {
  width: 100%;
  height: 100%; /* 确保卡片占满父容器高度 */
  background: linear-gradient(145deg, #0a2a66, #082459);
  border: 1px solid rgba(100, 149, 237, 0.2);
  border-radius: 0.4vw;
  padding: 0.5vw;
  box-shadow: 0 0.2vw 1vw rgba(0, 10, 30, 0.3);
  color: #e6eefc;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* 使用flex布局 */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(100, 149, 237, 0.3);
  margin-bottom: 10px;
  flex-shrink: 0; /* 标题栏不收缩 */
}

.card-title {
 font-size: clamp(16px,1.1vw,18px);
  font-weight: 600;
  color: #4da6ff;
}

.table-container {
  width: 100%;
  flex-grow: 1; /* 表格容器占满剩余空间 */
  overflow: auto; /* 内容超出时显示滚动条 */
  padding: 0.3vw 0;
  box-sizing: border-box;
}

.data-table {
  width: 100%;
  height: 100%; /* 表格占满容器高度 */
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 5px;
  text-align: left;
  border-bottom: 1px solid rgba(100, 149, 237, 0.15);
  white-space: nowrap;
}

.data-table th {
  font-size: 14px;
  color: #8da5c8;
  font-weight: 600;
  background-color: rgba(100, 149, 237, 0.05);
  position: sticky;
  top: 0; /* 表头 sticky 固定在顶部 */
  z-index: 1;
}

.data-table td {
  font-size: 14px;
  color: #ffffff;
}

.total-row {
  background-color: rgba(77, 166, 255, 0.08);
  font-weight: 600;
}

.total-row td {
  color: #4da6ff;
}

.high-utilization {
  color: #4cd964;
  text-shadow: 0 0 0.2vw rgba(76, 217, 100, 0.4);
}

.medium-utilization {
  color: #ffd60a;
  text-shadow: 0 0 0.2vw rgba(255, 214, 10, 0.4);
}

.low-utilization {
  color: #ff9500;
  text-shadow: 0 0 0.2vw rgba(255, 149, 0, 0.4);
}

/* 滚动条样式优化 */
.table-container::-webkit-scrollbar {
  width: 0.3vw;
  height: 0.3vw;
}

.table-container::-webkit-scrollbar-track {
  background: rgba(100, 149, 237, 0.1);
  border-radius: 0.2vw;
}

.table-container::-webkit-scrollbar-thumb {
  background: rgba(100, 149, 237, 0.5);
  border-radius: 0.2vw;
}
</style>
